<template>
  <div>
    <!-- 头部 -->
    <div class="top">
      <div class="top_box">
        <div></div>
        <p>商品管理</p>
      </div>
    </div>
    <!-- 步骤条 -->
    <el-steps :active="active" align-center color="#00bfa0">
      <el-step title="检索商品"></el-step>
      <el-step title="填写商品信息"></el-step>
      <el-step title="填写商品属性"></el-step>
      <el-step title="选择商品关联"></el-step>
    </el-steps>

    <!-- 步骤一内容 -->
    <el-card class="box-card box-card_one" v-show="active == 1">
      <div class="left_box">
        <div><i class="el-icon-collection-tag"></i> 检索商品</div>
      </div>
      <div class="right_box">
        <el-form
          label-position="right"
          label-width="400px"
          :model="formLabelAlign"
        >
          <el-form-item label="按照编码或者名称进行检索" class="first_choose">
            <el-input
              v-model="formLabelAlign.name"
              placeholder="请输入编码或者药材名称进行检索"
            ></el-input>
            <el-tooltip class="item" effect="light" placement="right">
              <div slot="content">
                本站所有药材名称依据中华人名共和国医典簿取名<br />编号与医典簿编号一一对应。
              </div>
              <i class="el-icon-question" />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="当前选择">
            <el-input
              placeholder="请输入内容"
              v-model="formLabelAlign.choose"
              :disabled="true"
            >
            </el-input>
          </el-form-item>
        </el-form>

        <!-- 表格  -->
        <div class="outcome">搜索结果</div>
        <el-table
          :data="tableData"
          style="width: 64.5%; margin: 0 210px"
          border
          :show-header="false"
        >
          <el-table-column prop="id" width="180"> </el-table-column>
          <el-table-column prop="name" width="507"> </el-table-column>
        </el-table>
        <div class="pagination_box">
          <el-pagination layout="prev, pager, next" :total="50">
          </el-pagination>
        </div>
        <hr />
        <br />
        <div class="next_box">
          <el-button type="button" class="next_btn" @click="next"
            >下一步,填写商品信息</el-button
          >
        </div>
      </div>
    </el-card>
    <!-- 步骤二 -->
    <div class="page" v-show="active == 2">
      <div class="left_div">
        <img src="../../assets/arrow.png" alt="" class="arrow" />
        <img src="../../assets/arrowCenter.png" alt="" class="arrowCenter" />
      </div>
      <div class="box_div">
        <el-form ref="dataForm" :model="dataForm" label-width="180px">
          <el-form-item label="药材名称:" class="Ipt gray">
            <el-input v-model="dataForm.name" disabled />
          </el-form-item>
          <el-form-item label="副标题:" class="Ipt">
            <el-input
              v-model="dataForm.title"
              placeholder="商品副标题会展示在商品名称下方"
            />
          </el-form-item>
          <el-form-item
            label=""
            class="Ipt"
            style="margin-top: -24px; margin-left: -15px"
          >
            <el-input
              readonly
              placeholder="请输入药材的独特加工方式或者其优点，不可超过18个字符。"
              class="bodernone"
            />
          </el-form-item>
          <el-form-item label="商品介绍:">
            <el-input
              type="textarea"
              v-model="dataForm.desc"
              class="textarea"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>

          <el-form-item label="药材产地:" class="sel">
            <el-select
              v-model="dataForm.province"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span> 省</span>
            <el-select
              v-model="dataForm.city"
              multiple
              collapse-tags
              style="margin-left: 10px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span> 市</span>
            <el-select
              v-model="dataForm.county"
              multiple
              collapse-tags
              style="margin-left: 10px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span> 县</span>
          </el-form-item>
          <el-form-item label="发货地:" class="Ipt">
            <el-input
              v-model="dataForm.address"
              placeholder="请输入药材发货地"
            />
          </el-form-item>
          <el-form-item label="发货仓:" class="Ipt">
            <el-input
              v-model="dataForm.storehouse"
              placeholder="请输入发货仓"
            />
          </el-form-item>
          <el-form-item label="可提供发票:" class="Ipt">
            <el-switch
              v-model="dataForm.bill"
              active-color="#95f204"
              inactive-color="#cccccc"
            />
          </el-form-item>
          <el-form-item label="商品详情页展示订单信息:" class="Ipt">
            <el-switch
              v-model="dataForm.order"
              active-color="#95f204"
              inactive-color="#cccccc"
            />
          </el-form-item>
          <br />
          <br />
        </el-form>
        <!-- 规格等级 -->
        <div class="fromLeftAddRight">
          <el-form :model="dataForm" label-width="90px">
            <el-form-item label="规格等级:" class="Ipt">
              <el-input v-model="dataForm.grade" />
            </el-form-item>
            <el-form-item label="商品库存:" class="Ipt">
              <div style="display: flex">
                <el-input v-model="dataForm.num" />&emsp;
                <el-checkbox v-model="dataForm.check">展示库存</el-checkbox>
              </div>
            </el-form-item>
            <el-form-item label="计量单位:" class="Ipt">
              <el-select v-model="dataForm.kg" multiple>
                <el-option value="公斤">公斤</el-option>
                <el-option value="斤">斤</el-option>
                <el-option value="吨">吨</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="起批量:" class="Ipt">
              <el-input
                v-model="dataForm.Starting_batch"
                placeholder="请输入起批量"
              />
            </el-form-item>

            <el-form-item label="包装方式:" class="Ipt">
              <el-select v-model="dataForm.package" multiple>
                <el-option value="编织袋">编织袋</el-option>
                <el-option value="桶">桶</el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="价格:" class="Ipt">
              <div style="display: flex">
                <el-input v-model="dataForm.price" />&emsp;
                <el-checkbox v-model="dataForm.priceCheck"
                  >展示价格</el-checkbox
                >
              </div>
            </el-form-item>

            <el-form-item label="商品上架:" class="Ipt">
              <el-switch
                v-model="dataForm.grounding"
                active-color="#95f204"
                inactive-color="#cccccc"
              />
            </el-form-item>
            <el-form-item label="商品推荐:" class="Ipt">
              <el-radio-group v-model="dataForm.recommend">
                <el-radio :label="1">新品</el-radio>
                <el-radio :label="2">推荐</el-radio>
                <el-radio :label="3">热销</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-button class="delBtn">删除规格</el-button>
            <el-button class="addBtn" @click="showRightForm"
              >添加规格</el-button
            >
          </el-form>

          <!-- 右边 -->
          <el-form :model="dataForm" label-width="90px" class="rightForm">
            <el-form-item label="规格等级:" class="Ipt">
              <el-input v-model="dataForm.grade" />
            </el-form-item>
            <el-form-item label="商品库存:" class="Ipt">
              <div style="display: flex">
                <el-input v-model="dataForm.num" />&emsp;
                <el-checkbox v-model="dataForm.check">展示库存</el-checkbox>
              </div>
            </el-form-item>
            <el-form-item label="计量单位:" class="Ipt">
              <el-select v-model="dataForm.kg" multiple>
                <el-option value="公斤">公斤</el-option>
                <el-option value="斤">斤</el-option>
                <el-option value="吨">吨</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="起批量:" class="Ipt">
              <el-input
                v-model="dataForm.Starting_batch"
                placeholder="请输入起批量"
              />
            </el-form-item>

            <el-form-item label="包装方式:" class="Ipt">
              <el-select v-model="dataForm.package" multiple>
                <el-option value="编织袋">编织袋</el-option>
                <el-option value="桶">桶</el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="价格:" class="Ipt">
              <div style="display: flex">
                <el-input v-model="dataForm.price" />&emsp;
                <el-checkbox v-model="dataForm.priceCheck"
                  >展示价格</el-checkbox
                >
              </div>
            </el-form-item>

            <el-form-item label="商品上架:" class="Ipt">
              <el-switch
                v-model="dataForm.grounding"
                active-color="#95f204"
                inactive-color="#cccccc"
              />
            </el-form-item>
            <el-form-item label="商品推荐:" class="Ipt">
              <el-radio-group v-model="dataForm.recommend">
                <el-radio :label="1">新品</el-radio>
                <el-radio :label="2">推荐</el-radio>
                <el-radio :label="3">热销</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-button class="delBtn2">删除规格</el-button>
            <el-button class="addBtn2">添加规格</el-button>
          </el-form>
        </div>

        <div style="margin-top: 200px">
          <el-button type="success" @click="next"
            >下一步，填写商品详情</el-button
          >
        </div>
      </div>
    </div>
    <!-- 步骤三内容 -->
    <el-card class="box-card box-card_three" v-show="active == 3">
      <div class="left_box">
        <div class="shop_img">
          <i class="el-icon-collection-tag"></i> 商品相册
        </div>
        <div class="shop_specs">
          <i class="el-icon-collection-tag"></i> 规格参数
        </div>
      </div>
      <div class="right_box">
        <div class="album">
          <div class="album-image">
            <div class="img">
              <el-row>
                <el-col :span="8">
                  <el-card :body-style="{ padding: '0px' }">
                    <!-- <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                class="image"> -->
                    <div class="img-img">
                      <i class="el-icon-plus"></i>
                    </div>
                    <div
                      style="
                        padding: 14px;
                        display: flex;
                        justify-content: space-evenly;
                      "
                    >
                      <el-link type="danger" :underline="false"
                        >商品主图</el-link
                      >
                      <el-link type="success" :underline="false"
                        >删除图片</el-link
                      >
                    </div>
                  </el-card>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="8">
                  <el-card :body-style="{ padding: '0px' }">
                    <!-- <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                class="image"> -->
                    <div class="img-img">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                    <div
                      style="
                        padding: 14px;
                        background-color: #f9fafc;
                        display: flex;
                        justify-content: space-evenly;
                      "
                    >
                      <el-link type="danger" :underline="false"
                        >添加图片</el-link
                      >
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <div class="btn">
              <el-button type="primary">上传图片</el-button>
            </div>
          </div>
          <div class="album-video">
            <div class="video">
              <el-row>
                <el-col :span="8">
                  <el-card :body-style="{ padding: '0px' }">
                    <!-- <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                class="image"> -->
                    <div class="img-img">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                    <div
                      style="
                        padding: 14px;
                        background-color: #f9fafc;
                        display: flex;
                        justify-content: space-evenly;
                      "
                    >
                      <el-link type="danger" :underline="false"
                        >添加视频</el-link
                      >
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <div class="btn">
              <el-button type="primary">上传视频</el-button>
            </div>
          </div>
        </div>
        <el-button class="img_tex"> 图文详情 </el-button>
        <!-- 富文本输入框 -->
        <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
          @ready="onEditorReady($event)"
        >
        </quill-editor>
        <div class="next_box">
          <el-button type="button" class="next_btn" @click="previous_step_btn"
            >上一步,填写商品信息</el-button
          >
          <el-button type="button" class="next_btn" @click="next"
            >下一步,选择商品关联</el-button
          >
        </div>
      </div>
    </el-card>
    <!-- 步骤四 -->
    <el-card class="box-card box-card_one box-card_four" v-show="active == 4">
      <div class="left_box">
        <div><i class="el-icon-collection-tag"></i> 检索商品</div>
      </div>
      <div class="right_box">
        <input type="text" class="text" placeholder="请输入关键词" />
        <button class="little">搜索</button>
        <!-- 表格  -->
        <div class="tatle">
          <div style="width: 40%">
            <!-- <div class="outcome">搜索结果</div> -->
            <div class="label">搜索结果</div>
            <el-table :data="tableData" border :show-header="false">
              <el-table-column type="selection"> </el-table-column>
              <el-table-column prop="name"> </el-table-column>
            </el-table>
            <div class="label">
              <button class="qx">全选</button>
              <button class="little">确定</button>
            </div>
          </div>
          <div style="width: 40%">
            <!-- <div class="outcome">
              已选择关联商品<span style="color:red;">{{ shop }}</span>条
            </div> -->
            <div class="label">
              选择关联商品<span style="color: red">4</span>条
            </div>
            <el-table :data="tableData" border :show-header="false">
              <el-table-column type="selection"> </el-table-column>
              <el-table-column prop="name"> </el-table-column>
            </el-table>
            <div class="label">
              <button class="qx">全选</button>
              <button class="little">移除</button>
            </div>
          </div>
        </div>
        <hr />
        <br />
        <div style="width: 100%; text-align: center; margin: 20px 0">
          <button
            style="
              background: white;
              border: 1px solid #00bfa0;
              border-radius: 6px;
              color: #00bfa0;
              margin: 0 20px;
            "
          >
            上一步,填写商品属性
          </button>
          <button style="color: white; border-radius: 6px">
            完成,提交商品
          </button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
//引入富文输入框

import { quillEditor } from "vue-quill-editor";

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      active: 1,
      formLabelAlign: {
        name: "",
        choose: "金银花",
        imageUrl: "",
      },
      tableData: [
        {
          id: "108",
          name: "金银花",
        },
        {
          id: "108",
          name: "金银花",
        },
        {
          id: "108",
          name: "金银花",
        },
        {
          id: "108",
          name: "金银花",
        },
        {
          id: "108",
          name: "金银花",
        },
        {
          id: "108",
          name: "金银花",
        },
        {
          id: "108",
          name: "金银花",
        },
      ],
      dataForm: {
        name: "金银花", //药材名称
        title: "", //副标题
        desc: "", //商品介绍
        province: "", //省
        city: "", //市
        county: "", //县
        address: "", //发货地
        storehouse: "", //发货仓
        bill: false, //是否提供发票
        order: true, //商品详情页订单信息
        grade: "", //等级
        num: "", //商品库存
        checked: true, //价格checkbox
        check: true, //库存checkbox
        kg: "公斤", //起批量
        Starting_batch: "", //起批量
        package: "", //包装方式
        price: "", //价格
        priceCheck: true, //价格checkbox
        grounding: "", //上架
        recommend: 1, //商品推荐
        options: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  // 富文本输入框
  editorOption: {
    modules: {
      toolbar: {
        container: [
          ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
          ["blockquote", "code-block"], // 引用  代码块
          [{ header: 1 }, { header: 2 }], // 1、2 级标题
          [{ script: "sub" }, { script: "super" }], // 上标/下标
          [{ indent: "-1" }, { indent: "+1" }], // 缩进
          [{ direction: "rtl" }], // 文本方向
          [
            {
              size: [
                "12",
                "14",
                "16",
                "18",
                "20",
                "22",
                "24",
                "28",
                "32",
                "36",
              ],
            },
          ], // 字体大小
          [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
          [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
          // [{ font: ['songti'] }], // 字体种类
          [{ align: [] }], // 对齐方式
          ["clean"], // 清除文本格式
          ["image", "video"], // 链接、图片、视频
        ],
        handlers: {
          image: function (value) {
            if (value) {
              // value === true
              document.querySelector(".avatar-uploader input").click();
            } else {
              this.quill.format("image", false);
            }
          },
        },
      },
    },
    placeholder: "请输入正文",
  },
  methods: {
    //控制步骤条
    next() {
      if (this.active++ > 3) this.active = 1;
    },
    previous_step_btn() {
      if (this.active-- < 1) this.active = 1;
    },

    // 步骤二
    showRightForm() {
      document.querySelector(".rightForm").style.display = "block";
      document.querySelector(".delBtn").style.display = "inline-block";
      document.querySelector(".addBtn").style.display = "none";
    },
    //步骤三
    // 富文本输入框
    // 失去焦点事件
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      console.log("editor change!", quill, html, text);
      this.content = html;
    },
  },
};
</script>
<style lang='scss' scoped>
.top {
  width: 100%;
  height: 50px;
  background-color: #f3f3f3;
  .top_box {
    width: 1280px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: start;
    align-items: center;
    div {
      width: 3px;
      height: 45%;
      background-color: #00bfa0;
    }
    p {
      margin-left: 10px;
      font-size: 14px;
      color: #999999;
    }
  }
}
//步骤条
.el-steps {
  width: 1280px;
  margin: 30px auto;
}
// 步骤一内容
.box-card_one {
  width: 1280px;
  margin: 20px auto;
  background-color: #fff;
  border: 1px soild #999999;
  box-shadow: none;
  ::v-deep .el-card__body {
    padding: 0;
    .left_box {
      float: left;
      width: 14%;
      div {
        margin-top: 90px;
        font-size: 22px;
        height: 50px;
        line-height: 50px;
        width: 200px;
        color: #fff;
        background-image: url("https://files.axshare.com/gsc/QFCNJT/4d/c5/82/4dc582313bc546ed8e9590a0739817ee/images/%E9%80%89%E6%8B%A9%E5%95%86%E5%93%81%E5%88%86%E7%B1%BB/u1568.svg");
        i {
          margin-left: 20px;
        }
      }
    }
    .right_box {
      box-sizing: border-box;
      float: left;
      width: 86%;
      border-left: 1px solid #999999;
      padding-left: 30px;
      .el-form {
        margin-top: 100px;
        .el-input {
          width: 400px;
        }
      }
      .outcome {
        width: 64.4%;
        height: 50px;
        line-height: 50px;
        border: 1px solid #eaeef5;
        margin-left: 210px;
        background-color: #f9fafc;
      }

      .pagination_box {
        width: 64.4%;
        height: 50px;
        border: 1px solid #eaeef5;
        margin-left: 210px;
        display: flex;
        justify-content: end;
        align-items: center;
        .el-pagination {
          float: right;
        }
      }
      hr {
        width: 80%;
        height: 5px;
        margin-top: 20px;
        border: none;
        border-top: 2px dotted #eaeef5;
      }
      .next_box {
        text-align: center;
        margin: 30px 0;
        .next_btn {
          background-color: #33ccb3;
        }
      }
    }
  }
}
// 步骤二
.fromLeftAddRight {
  display: flex;
  justify-content: space-between;
}

.fromLeftAddRight .rightForm {
  display: none;
}

.delBtn {
  color: lightgray;
  border: 1px solid lightgray;
  display: none;
}

.left_div {
  position: relative;
}

.arrow {
  position: absolute;
  top: 40px;
  right: -15px;
}

.arrowCenter {
  position: absolute;
  top: 740px;
  right: -17px;
}

.addBtn2,
.addBtn {
  color: #0000ff;
  border: 1px solid #0000ff;
}

.sel {
  text-align: left;
}

.textarea :deep(.el-textarea__inner) {
  resize: none;
  height: 160px;
  width: 600px;
}

.page {
  display: flex;
  height: 100%;
  border: 1px solid lightgray;
  margin: 20px;
  width: 1280px;
  margin: auto;
}

.Ipt {
  width: 490px;
  text-align: left;
}

.bodernone :deep(.el-input__inner) {
  border: 0;
  width: 500px;
}

.Ipt.gray :deep(.el-input__inner) {
  background: lightgray;
  color: white;
}

.left_div {
  width: 100px;
  border-right: 2px solid lightgray;
}

.box_div {
  width: 92%;
  padding: 40px 50px;
  box-sizing: border-box;
  background: white;
}
// 步骤三
.box-card_three {
  width: 1280px;
  margin: 20px auto;
  background-color: #fff;
  border: 1px soild #999999;
  box-shadow: none;
  ::v-deep .el-card__body {
    padding: 0;
    .left_box {
      float: left;
      width: 14%;
      .shop_specs {
        margin-top: 590px;
      }
      div {
        margin-top: 90px;
        font-size: 22px;
        height: 50px;
        line-height: 50px;
        width: 200px;
        color: #fff;
        background-image: url("https://files.axshare.com/gsc/QFCNJT/4d/c5/82/4dc582313bc546ed8e9590a0739817ee/images/%E9%80%89%E6%8B%A9%E5%95%86%E5%93%81%E5%88%86%E7%B1%BB/u1568.svg");
        i {
          margin-left: 20px;
        }
      }
    }
    .right_box {
      float: left;
      width: 84%;
      border-left: 1px solid black;
      .img_tex {
        background-color: #ff6540;
        margin-left: 150px;
        color: white;
        width: 200px;
      }
      .quill-editor {
        width: 75%;
        height: 600px;
        margin-left: 150px;
        margin-bottom: 150px;
      }
      .next_box {
        text-align: center;
        margin: 30px 0;
        .next_btn {
          background-color: #33ccb3;
        }
      }
    }
  }
}
.album {
  margin-top: 90px;
  margin-left: 150px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.album .album-image .img,
.album .album-video .video {
  width: 40rem;
  display: flex;
  // height: 16rem;
}

.album .album-image .img .el-card,
.album .album-video .video .el-card {
  width: 12rem;
  margin-right: 1rem;
}

.album .album-image .img .el-card .img-img,
.album .album-video .video .el-card .img-img {
  // width: 100%;
  height: 192px;
  width: 100%;
  display: block;
  text-align: center;
  line-height: 192px;
  border-bottom: 1px solid #e4e4e4;
}

.album .album-image .img .el-card .img-img i,
.album .album-video .video .el-card .img-img i {
  line-height: 194px;
}

.album .album-image .img .el-card .img-img i::before,
.album .album-video .video .el-card .img-img i::before {
  font-size: 6rem;
}

.album .album-image .btn,
.album .album-video .btn {
  margin: 20px;
}

.right_box .pig_btn {
  width: 200px;
  height: 30px;
  background-color: #f9fafc;
  border: 1px gray solid;
  text-align: center;
  line-height: 30px;
}

.right_box button {
  width: 200px;
  height: 40px;
  background-color: #00bfa0;
  border: none;
  // margin: 30px 0;
  font-size: 20px;
}

.right_box .little {
  width: 100px;
  height: 40px;
  border-radius: 6px;
  // margin-left: 20px;
  font-size: 20px;
  color: white;
}

.right_box .qx {
  background: white;
  width: 100px;
  height: 40px;
  color: gray;
  font-size: 20px;
  border: 1px solid gray;
  border-radius: 6px;
}

.tatle {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.text {
  margin: 20px 0 20px 80px;
  height: 40px;
  font-size: 18px;
  padding-left: 10px;
  border: 1px solid #cccccc;
  outline: none;
}

.label {
  height: 50px;
  line-height: 50px;
  background: #f9fafc;
}
.box-card_four {
  .right_box {
    .el {
      margin: 0;
    }
  }
}
</style>